<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>进场配置</title>
		<link rel="stylesheet" href="/statics/css/jquery-ui.min.css">
		<link rel="stylesheet" href="/statics/css/ConfigDemo.css">
<!-- 		<link rel="stylesheet" href="/statics/css/ol.css"> -->
		<link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
		<script src="/statics/js/jquery-3.2.1.min.js"></script>
		<script src="/statics/js/jquery-ui.min.js"></script>
		<script src="/statics/js/Base.js"></script>
<!-- 		<script src="/statics/js/ol.js"></script> -->
		<script src="https://openlayers.org/en/v4.4.2/build/ol.js" type="text/javascript"></script>
		<script src="/statics/js/AutoGreateMap.js"></script>
		<script src="/statics/js/AutoCanvas.js"></script>
		<script src="/statics/js/jcanvas.min.js"></script>
		<script>
			$(function() {
				$("#accordion").accordion({
					heightStyle: "content"
				});
				$("#PubDate").datepicker();
				SetDateDefault();
			    
			    var LeftValhandle = $( "#LeftValHandle" );
			    $( "#LeftValSlider" ).slider({
			      create: function() {
			    	  LeftValhandle.text( $( this ).slider( "value" ) );
			      },
			      min: -200,
			      max: 200,
			      value: 0,
			      slide: function( event, ui ) {
			    	  LeftValhandle.text( ui.value );
			      }
			     
			    });	
			    var HightValhandle = $( "#HighValHandle" );			    
			    $( "#HightValSlider" ).slider({
			      create: function() {
			    	  HightValhandle.text( $( this ).slider( "value" ) );
			      },
			      min: -200,
			      max: 200,
			      value: 50,
			      slide: function( event, ui ) {
			    	  HightValhandle.text( ui.value );
			      }
			     
			    });	
			    
			    var xpos = $( "#xpos" );			    
			    $( "#xposSlider" ).slider({
			      create: function() {
			    	  xpos.text( $( this ).slider( "value" ) );
			      },
			      min: -50,
			      max: 50,
			      value: 10,
			      slide: function( event, ui ) {
			    	  xpos.text( ui.value );
			      }
			     
			    });	
			    
			    var ypos = $( "#ypos" );			    
			    $( "#yposSlider" ).slider({
			      create: function() {
			    	  ypos.text( $( this ).slider( "value" ) );
			      },
			      min: -50,
			      max: 50,
			      value: 10,
			      slide: function( event, ui ) {
			    	  ypos.text( ui.value );
			      }
			     
			    });	
			    
			    $( "#LeftValSlider" ).on( "slidechange", ChangePosition );
			    $( "#HightValSlider" ).on( "slidechange", ChangePosition );

			    InitMap();
			    DrawCycle();
			    
			    InitTestData();//填充测试数据
			});
			
		</script>
	</head>

	<body>

		<div id="accordion" class="AcdDiv">
			<h3>进场主信息</h3>
			<div>
				<form action="/MainInfo" name="MainInfoFm" >
				<table class="InputCss">
					<tr>
						<td class="InputCss">
							<label>发布日期:</label>
						</td>
						<td><input id="PubDate" name="PubDate" editable=false />
					</tr>
					<tr>
						<td class="InputCss">
							<label>索引:</label>
						</td>
						<td><input name="IndCode" id="IndCode"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>机场代码:</label>
						</td>
						<td><input name="AirportCode" id="AirportCode"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>航图名称:</label>
						</td>
						<td><input name="MapName" id="MapName"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>国家:</label>
						</td>
						<td><input name="Country" id="Country"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>城市:</label>
						</td>
						<td><input name="City" id="City"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>机场标高:</label>
						</td>
						<td><input name="AptElev" id="AptElev"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>高度单位:</label>
						</td>
						<td><input name="TransLevSet" id="TransLevSet"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>高度层:</label>
						</td>
						<td><input name="TransLev" id="TransLev"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>高度过度层:</label>
						</td>
						<td><input name="TransALT" id="TransALT"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>通波频率:</label>
						</td>
						<td><input name="ATIS" id="ATIS"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>最高速度:</label>
						</td>
						<td><input name="MaxSpeed" id="MaxSpeed"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>进场代码:</label>
						</td>
						<td><input name="ArrvCode" id="ArrvCode"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>适用跑到:</label>
						</td>
						<td><input name="Runway" id="Runway"/></td>
					</tr>
					<tr>
						<td class="InputCss">
							<label>中心点:</label>
						</td>
						<td><input name="CenterPos" id="CenterPos"/></td>
					</tr>
				</table>
				<hr >
				<table style="float:right; ">
					<tr>
						<td colspan=4>
							<label style="float: left;width:auto;">高度层换算表:</label>
						</td>

					</tr>
					<tr>
						<td><input class="ConvInput" id="FLF" /></td>
						<td style="width:34px"><label style="width:20px; padding:8px">-></label></td>
						<td><input class="ConvInput"  id="FLS" /></td>
						<td><input class="ConvBtn" type="button" value="添加" onclick="AddFL()"/> </td>
					</tr>
					<tr rowspan="4">
						<td colspan="4"><textarea name="FLConv" id = "FLConv"></textarea></td>
					</tr>
				</table>
				<hr >
				<table style="float:right; ">
					<tr>
						<td colspan=4>
							<label style="float: left;width:auto;">高度过度层换算表:</label>
						</td>

					</tr>
					<tr>
						<td><input class="ConvInput" id="FTF"/></td>
						<td style="width:34px;padding-right:0px"><label style="width:20px; padding:8px;">-></label></td>
						<td><input class="ConvInput" id="FTS"/></td>
						<td><input class="ConvBtn" type="button" value="添加" onclick="AddFT()"/> </td>
					</tr>
					<tr rowspan="4">
						<td colspan="4"><textarea id="FTConv"></textarea></td>
					</tr>
				</table>
				<div style="padding-left: 50px;height: 30px;">
					<input style="width:auto" type="button" value="新增" onclick="AddNewMainInfo()">
					<input style="width:auto" type="button" value="修改" onclick="SelectMainInfo()">
					<input style="width:auto" type="button" value="查询" onclick="SelectMainInfo()"> 
				</div>
				</form>
			</div>
			<h3>进场主元素</h3>
			<div>
				<table class="InputCss">
					<tr>
						<td class="InputCss">
							<label>元素ID:</label>
						</td>
						<td><input id="FeatureID" onblur="ChageIDF();"/>
					</tr>
					<tr>
						<td class="InputCss">
							<label>机场代码:</label>
						</td>
						<td><input id="FtAirportCode" editable="false"/>
					</tr>
					<tr>	
						<td class="InputCss">
							<label>元素类型:</label>
						</td>
						<td>
							<select id="FeatType" class="SelectCss">
								<option value="None"></option>
								<option value="0001">领航台</option>
								<option value="0002">航线</option>
								<option value="0003">强制报告点</option>
								<option value="0004">非强制报告点</option>
								<option value="0005">机场</option>
								<option value="0006">等待区</option>
							</select>
						</td>
					</tr>
					<tr>	
						<td class="InputCss">
							<label>角度:</label>
						</td>
						<td><input id="Angle" /></td>
					</tr>
					<tr>		
						<td class="InputCss">
							<label>航径里程:</label>
						</td>
						<td><input id="Length" /></td>
					</tr>
					<tr>	
						<td class="InputCss">
							<label>最大限速:</label>
						</td>
						<td><input id="FTMaxSpeed" /></td>
					</tr>
					<tr>	
						<td class="InputCss">
							<label>最低高度:</label>
						</td>
						<td><input id="Elev" /></td>
					</tr>
					<tr>							
						<td class="InputCss">
							<label>通信频率:</label>
						</td>
						<td><input id="Aist" /></td>
					</tr>
					<tr>							
						<td class="InputCss">
							<label>通信代码:</label>
						</td>
						<td><input id="AistCode" /></td>
					</tr>
					<tr>					
						<td class="InputCss">
							<label>元素坐标:</label>
						</td>
						<td><input id="LineGeo" /></td>
					</tr>

					<tr>					
						<td class="InputCss">
							<label>X偏移量:</label>
						</td>
						<td>
							<div id="LeftValSlider">
								<div id="LeftValHandle" class="ui-slider-handle"></div>
							</div>
						</td>
					</tr>
					<tr>					
						<td class="InputCss">
							<label>Y偏移量:</label>
						</td>
						<td>
							<div id="HightValSlider">
								<div id="HighValHandle" class="ui-slider-handle"></div>
							</div>
						</td>
					</tr>
				</table>	
				<div style="padding-left: 50px;height: 40px;padding-top: 10px;">
					<button id="addFeature">add</button>
					<button id="updateFeature">update</button>
					<button id="deleteFeature">delete</button>
					<button id="undoFeature">undo</button>
				</div>
			</div>
			<h3>进场扇区</h3>
			<div>
				<table class="InputCss">
					<tr>
						<td class="InputCss">
							<label>机场代码:</label>
						</td>
						<td><input id="CyAirportCode" editable="false"/>
					</tr>
					<tr>					
						<td class="InputCss">
							<label>元素类型:</label>
						</td>
						<td>
							<select id="FeatType2" class="SelectCss" onchange="ChangeCylePan(this.value)">
								<option value="0001">线</option>
								<option value="0002">高度</option>
							</select>
						</td>
					</tr>
					<tr>					
						<td class="InputCss">
							<label id="ValueLabel">角度:</label>
						</td>
						<td><input id="CycValue" /></td>
					</tr>
					<tr>					
						<td class="InputCss">
							<label>X轴:</label>
						</td>
						<td><div id="xposSlider" ><div id="xpos" class="ui-slider-handle" ></div></div></td>
					</tr>
					<tr>					
						<td class="InputCss">
							<label>Y轴:</label>
						</td>
						<td><div id="yposSlider" ><div id="ypos" class="ui-slider-handle" ></div></div></td>
					</tr>
				</table>	
				<div style="padding-left: 100px; padding-top: 10px">
					<input type="button" value="新增" onclick="AddCycle();"/>
					<input type="button" id="upCycBtn" value="更新" onclick="UpdateCycle();"/>
				</div>
			</div>
		</div>

		<div class="MainCot">
			<div class="MainTitle">
				<input class="Closer" type="button" value="H"/>
				<input class="Closer" type="button" value="R"/>
				<input class="Closer" type="button" value="F"/>
				<input class="Closer" type="button" value="C"/>
			</div>
			<div class="MainContent">				
				<div class="MainInfo" style="float:left; width:69%;">
					<table class="RetTable">
						<tr>
							<td>发布日期:</td><td ><input id="RetPubDate"></td>
							<td>索引:</td><td><input id="RetIndCode"></td>
							<td>机场代码:</td><td><input id="RetAirportCode"></td>
						</tr>
						<tr>
							<td>航图名称:</td><td ><input id="RetMapName"></td>
							<td>国家:</td><td><input id="RetCountry"></td>
							<td>城市:</td><td><input id="RetCity"></td>
						</tr>
						<tr>
							<td>机场标高:</td><td ><input id="RetAptElev"></td>
							<td>高度单位:</td><td><input id="RetTransLevSet"></td>
							<td>高度层:</td><td><input id="RetTransLev"></td>
							<td>高度过度:</td><td><input id="RetTransALT"></td>
						</tr>
						<tr>
							<td>通波频率:</td><td ><input id="RetATIS"></td>
							<td>最高速度:</td><td><input id="RetMaxSpeed"></td>
							<td>适用跑道:</td><td><input id="RetRunway"></td>
						</tr>
						<tr>
							<td>进场代码:</td><td colspan="5"><input id="RetArrvCode" style="width:39em;margin:5px;"></td>
						</tr>
						<tr>
							<td>ROUTE:</td><td colspan="5"><input id="RetRoute" style="width:39em;margin:5px;"></td>
						</tr>
					</table>
				</div>
				<div class="MainCycle"> 
					<canvas id="CycleID" style="position:absolute"></canvas>
				</div>				
			</div>
			<div id="map" >
				<div id="location" style="width:10px; height:10px; z-index: 1;position: absolute;"></div>
			</div>
		</div>
	</body>

</html>